<template>
    <div class="abnormal-container">
        <div class="abnormal-header">
            <span class="header-title">异常处理</span>
            <span class="header-count">{{ totalOrderCount }} 条异常</span>
        </div>

        <!-- 表头 -->
        <div class="table-header">
            <div class="table-header-item">任务单</div>
            <div class="table-header-item">操作</div>
        </div>

        <!-- 滚动容器 -->
        <el-scrollbar class="scroll-wrapper">
            <div class="scroll-content">
                <div class="order-list">
                    <div class="order-item" v-for="(item, index) in allOrders" :key="item.waybillNumber || index">
                        <!-- 订单信息列 -->
                        <div class="order-cell order-column">
                            <div class="order-row first-row">
                                <div class="waybill-number">
                                    任务编号: <span class="waybill-value">{{ item.taskNo }}</span>
                                </div>
                                <div class="box-number">
                                    容器编号: <span class="box-value">{{ item.containerNo }}</span>
                                </div>
                            </div>
                            <div class="order-row second-row">
                                <div class="ng-text">
                                    <span class="ng-label">NG信息：</span>{{ item.message }}
                                </div>
                            </div>
                            <div class="order-row third-row">
                                <div class="ng-time">{{ item.createdTime }}</div>
                            </div>
                        </div>
                        <!-- 操作列：使用 Element 原生按钮样式 -->
                        <div class="order-cell operation-column">
                            <!-- 重新投入：使用 primary 类型按钮 -->
                            <el-button 
                                size="small" 
                                type="primary" 
                                @click="$emit('retry', item)"
                            >
                                消除
                            </el-button>
                            <!-- 转投人工：使用 warning 类型按钮 -->
                            <!-- <el-button 
                                size="small" 
                                type="warning" 
                                @click="$emit('manual', item)"
                            >
                                转投人工
                            </el-button> -->
                        </div>
                    </div>
                </div>
            </div>
            </el-scrollbar>
       
    </div>
</template>

<script setup>
import { computed } from 'vue';
import { ElScrollbar, ElButton } from 'element-plus';

const props = defineProps({
    orders: {
        type: Array,
        default: () => []
    }
});

// 所有异常订单数据
const allOrders = computed(() => {
    return Array.isArray(props.orders) ? props.orders : [];
});

// 总条数
const totalOrderCount = computed(() => allOrders.value.length);
</script>

<style scoped>
.abnormal-container {
    width: 100%;
    flex: 1;
    overflow: hidden;
    box-sizing: border-box;
    padding: 10px;
    background-color: #1e1a20;
    border: 2px solid #9e2a2b;
    border-radius: 8px;
    animation: pulse 2s infinite;

    /* 核心：使用flex布局垂直排列 */
    display: flex;
    flex-direction: column;
    gap: 5px; /* 内部元素间距 */
}

.abnormal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 5px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.header-title {
    font-size: 16px;
    color: #ff6b6b;
    font-weight: 600;
}

.header-count {
    font-size: 12px;
    background-color: #9e2a2b;
    padding: 2px 6px;
    border-radius: 10px;
    color: #fff;
}

.table-header {
    display: flex;
    width: 100%;
    padding: 8px;
    background-color: rgba(158, 42, 43, 0.3);
    border-radius: 4px;
    font-weight: bold;
}

.table-header-item {
    font-size: 14px;
    color: #e0e0e0;
    text-align: left;
}

.table-header-item:nth-child(1) {
    flex: 3;
}

.table-header-item:nth-child(2) {
    flex: 1;
}

/* 核心：滚动容器填充剩余空间 */
.scroll-wrapper {
    width: 100%;

}

.scroll-content {
    width: 100%;

}

.order-list {
    width: 100%;
}

.order-item {
    display: flex;
    width: 100%;
    padding: 12px 8px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    box-sizing: border-box;
    background-color: rgba(30, 26, 32, 0.7);
    transition: background-color 0.2s ease;
    align-items: center;
}

.order-item:nth-child(even) {
    background-color: rgba(35, 30, 38, 0.7);
}

.order-item:hover {
    background-color: rgba(50, 45, 55, 0.8);
}

.order-cell {
    font-size: 14px;
    color: #d0d0d0;
    text-align: left;
    word-break: break-all;
}

.order-column {
    flex: 3;
}

.order-cell:nth-child(2) {
    flex: 1;
}

.order-row {
    width: 100%;
    margin-bottom: 2px;
}

.order-row:last-child {
    margin-bottom: 0;
}

.first-row {
    display: flex;
    flex-wrap: wrap;
}

.waybill-number {
    margin-right: 10px;
}

.waybill-number, .box-number {
    color: #a0a0a0;
}

.box-value {
    color: #4da6ff;
    font-weight: 500;
}

.waybill-value {
    color: #a8d1ff;
    font-weight: 500;
}

.ng-text {
    color: #ff6b6b;
    font-weight: 600;
}

.ng-label {
    font-weight: 500;
    color: #ff8e8e;
}

.ng-time {
    font-size: 12px;
    color: #8da5c8;
    opacity: 0.9;
}

/* 操作列样式 */
.operation-column {
    display: flex;
    flex-direction: column;
    gap: 8px; /* 垂直方向间距 */
    padding: 0 5px;
}

/* 清除Element按钮的默认水平边距 */
:deep(.operation-column .el-button) {
    margin-right: 0 !important;
    margin-left: 0 !important;
    width: 100% !important;
}

:deep(.el-button--small) {
    padding: 6px 12px !important;
    box-sizing: border-box !important;
}

/* 边框动画效果 */
@keyframes pulse {
    0% { box-shadow: 0 0 5px rgba(158, 42, 43, 0.6); }
    50% { box-shadow: 0 0 15px rgba(230, 57, 70, 0.8); }
    100% { box-shadow: 0 0 5px rgba(158, 42, 43, 0.6); }
}

/* Element滚动条样式优化 */
:deep(.el-scrollbar__track) {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

:deep(.el-scrollbar__thumb) {
    background-color: rgba(255, 255, 255, 0.3) !important;
    border-radius: 4px !important;
}

:deep(.el-scrollbar__thumb:hover) {
    background-color: rgba(255, 255, 255, 0.5) !important;
}

/* 确保滚动内容区域正确填充 */
:deep(.el-scrollbar__view) {
    height: 100%;
}
</style>
